import React, { Component } from 'react';
import axios from 'axios';
import { Form, Input, Button, message } from 'antd';


const FormItem = Form.Item;
class AddBook extends Component{
    constructor(props){
        super(props);
    }
    handleSubmit = (event) =>{
        event.preventDefault();
        let book_data = `book_title=${this.props.form.getFieldValue('book_title')}`;
        axios.post('/api/add_book', book_data)
            .then(function (response) {
                if(response.data.code == 200){
                    message.success('创建成功');
                }else{
                    message.error(response.data.msg);
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }
    handleCancel = (event) =>{
        PubSub.publish('cover_flag', false);
    }
    render(){
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="add-book-box">
                <p>创建笔记本</p>
                <Form onSubmit={ this.handleSubmit }>
                    <FormItem>
                        {getFieldDecorator('book_title', {
                            rules: [{ required: true, message: '请输入笔记本名称' }],
                        })(
                            <Input placeholder="给笔记本起个名称" size="large" />
                        )}
                    </FormItem>
                    <FormItem>
                         <Button type="default cancel-button" htmlType="button" size="large" onClick={ this.handleCancel }>取消</Button>
                         <Button type="primary" htmlType="submit" size="large">创建笔记本</Button>
                    </FormItem>
                </Form>
            </div>
        );
    }
}
export const AddBookForm = Form.create({})(AddBook);